<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>忘记密码 - 奢享时光</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-gradient: linear-gradient(135deg, #7F00FF, #E100FF);
      --secondary-gradient: linear-gradient(135deg, #00F5A0, #00D9F5);
      --primary-color: #7F00FF;
      --secondary-color: #00F5A0;
      --accent-color: #FFE600;
      --dark-bg: #2D1B69;
      --light-bg: #6B3FA0;
      --text-light: #FFFFFF;
      --text-secondary: #E0D5FF;
      --card-bg: rgba(255, 255, 255, 0.1);
      --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      --border-radius: 16px;
      --border: 1px solid rgba(255, 255, 255, 0.18);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: 'Noto Sans SC', 'Poppins', sans-serif;
      background: var(--dark-bg);
      color: var(--text-light);
      font-size: 14px;
      line-height: 1.5;
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      outline: none;
    }

    .app-container {
      max-width: 480px;
      margin: 0 auto;
      min-height: 100vh;
      background: linear-gradient(180deg, var(--dark-bg), var(--light-bg));
      position: relative;
      overflow: hidden;
      padding-bottom: 30px;
      display: flex;
      flex-direction: column;
    }

    /* 背景装饰 */
    .bg-decoration {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .bg-circle {
      position: absolute;
      border-radius: 50%;
    }

    .bg-circle:nth-child(1) {
      width: 300px;
      height: 300px;
      top: -150px;
      right: -100px;
      background: radial-gradient(circle, rgba(225, 0, 255, 0.2), rgba(225, 0, 255, 0));
    }

    .bg-circle:nth-child(2) {
      width: 250px;
      height: 250px;
      bottom: 10%;
      left: -100px;
      background: radial-gradient(circle, rgba(0, 245, 160, 0.15), rgba(0, 245, 160, 0));
    }

    /* 顶部导航 */
    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(45, 27, 105, 0.8);
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: var(--border);
    }

    .back-button {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .page-title {
      font-size: 18px;
      font-weight: 600;
    }

    .header-actions {
      width: 36px;
      height: 36px;
    }

    /* 内容区域 */
    .content {
      position: relative;
      z-index: 1;
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* 重置密码表单 */
    .reset-form {
      margin: 20px 0;
    }

    .form-title {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 10px;
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .form-subtitle {
      font-size: 14px;
      color: var(--text-secondary);
      margin-bottom: 30px;
    }

    .input-group {
      margin-bottom: 20px;
    }

    .input-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .input-field {
      width: 100%;
      height: 50px;
      background: rgba(255, 255, 255, 0.1);
      border: var(--border);
      border-radius: 12px;
      padding: 0 15px;
      font-size: 16px;
      color: var(--text-light);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      transition: all 0.3s ease;
    }

    .input-field:focus {
      background: rgba(255, 255, 255, 0.15);
      border-color: var(--primary-color);
      outline: none;
      box-shadow: 0 0 0 3px rgba(127, 0, 255, 0.2);
    }

    .input-field::placeholder {
      color: rgba(224, 213, 255, 0.6);
    }

    .code-group {
      display: flex;
      gap: 10px;
    }

    .code-group .input-field {
      flex: 1;
    }

    .get-code-button {
      width: 120px;
      height: 50px;
      background: rgba(255, 255, 255, 0.1);
      border: var(--border);
      border-radius: 12px;
      color: var(--text-light);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .get-code-button:active {
      background: rgba(255, 255, 255, 0.2);
    }

    .password-group {
      position: relative;
    }

    .password-toggle {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: var(--text-secondary);
      cursor: pointer;
      z-index: 1;
    }

    .reset-button {
      width: 100%;
      height: 50px;
      background: var(--primary-gradient);
      border-radius: 12px;
      color: var(--text-light);
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      box-shadow: 0 8px 16px rgba(127, 0, 255, 0.3);
      transition: all 0.3s ease;
    }

    .reset-button:active {
      transform: translateY(2px);
      box-shadow: 0 4px 8px rgba(127, 0, 255, 0.3);
    }

    /* 进度条 */
    .progress-bar {
      display: flex;
      justify-content: space-between;
      margin: 30px 0;
    }

    .progress-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      flex: 1;
    }

    .step-number {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
      z-index: 1;
    }

    .step-number.active {
      background: var(--primary-gradient);
    }

    .step-number.completed {
      background: var(--secondary-gradient);
    }

    .step-title {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .step-title.active {
      color: var(--text-light);
    }

    .progress-line {
      position: absolute;
      top: 15px;
      height: 2px;
      background: rgba(255, 255, 255, 0.1);
      width: 100%;
      left: 50%;
    }

    .progress-step:first-child .progress-line {
      width: 50%;
      left: 50%;
    }

    .progress-step:last-child .progress-line {
      width: 50%;
      right: 50%;
      left: auto;
    }

    .progress-line.active {
      background: var(--primary-gradient);
    }

    /* 步骤表单 */
    .step-form {
      display: none;
    }

    .step-form.active {
      display: block;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 页脚 */
    .footer {
      margin-top: auto;
      text-align: center;
      padding: 20px;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .login-link {
      color: var(--accent-color);
      font-weight: 500;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="bg-circle"></div>
      <div class="bg-circle"></div>
    </div>

    <!-- 顶部导航 -->
    <header class="header">
      <a href="login.html" class="back-button">
        <i class="fas fa-arrow-left"></i>
      </a>
      <div class="page-title">找回密码</div>
      <div class="header-actions"></div>
    </header>

    <!-- 主要内容 -->
    <main class="content">
      <!-- 重置密码表单 -->
      <div class="reset-form">
        <h1 class="form-title">找回密码</h1>
        <p class="form-subtitle">通过手机验证，重置您的账号密码</p>

        <!-- 进度条 -->
        <div class="progress-bar">
          <div class="progress-step">
            <div class="step-number active" id="step1-number">1</div>
            <div class="progress-line" id="line1"></div>
            <div class="step-title active">验证手机</div>
          </div>
          <div class="progress-step">
            <div class="step-number" id="step2-number">2</div>
            <div class="progress-line" id="line2"></div>
            <div class="step-title" id="step2-title">重置密码</div>
          </div>
          <div class="progress-step">
            <div class="step-number" id="step3-number">3</div>
            <div class="step-title" id="step3-title">完成</div>
          </div>
        </div>

        <!-- 第一步：验证手机 -->
        <div class="step-form active" id="step1">
          <div class="input-group">
            <label class="input-label">手机号码</label>
            <input type="tel" class="input-field" placeholder="请输入手机号码" maxlength="11" id="phoneInput">
          </div>

          <div class="input-group">
            <label class="input-label">验证码</label>
            <div class="code-group">
              <input type="text" class="input-field" placeholder="请输入验证码" maxlength="6" id="codeInput">
              <button class="get-code-button" id="getCodeBtn">获取验证码</button>
            </div>
          </div>

          <button class="reset-button" id="nextStep1Btn">下一步</button>
        </div>

        <!-- 第二步：重置密码 -->
        <div class="step-form" id="step2">
          <div class="input-group">
            <label class="input-label">新密码</label>
            <div class="password-group">
              <input type="password" class="input-field" placeholder="请输入新密码" id="passwordInput">
              <div class="password-toggle" id="passwordToggle1">
                <i class="fas fa-eye-slash"></i>
              </div>
            </div>
          </div>

          <div class="input-group">
            <label class="input-label">确认密码</label>
            <div class="password-group">
              <input type="password" class="input-field" placeholder="请再次输入密码" id="confirmPasswordInput">
              <div class="password-toggle" id="passwordToggle2">
                <i class="fas fa-eye-slash"></i>
              </div>
            </div>
          </div>

          <button class="reset-button" id="nextStep2Btn">确认修改</button>
        </div>

        <!-- 第三步：完成 -->
        <div class="step-form" id="step3">
          <div style="text-align: center; padding: 30px 0;">
            <i class="fas fa-check-circle" style="font-size: 60px; color: var(--secondary-color); margin-bottom: 20px;"></i>
            <h2 style="margin-bottom: 15px;">密码重置成功</h2>
            <p style="color: var(--text-secondary); margin-bottom: 30px;">您已成功重置密码，请使用新密码登录</p>
            <a href="login.html" class="reset-button" style="text-decoration: none;">立即登录</a>
          </div>
        </div>
      </div>

      <!-- 页脚 -->
      <div class="footer">
        返回 <a href="login.html" class="login-link">登录</a>
      </div>
    </main>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取验证码
      const getCodeBtn = document.getElementById('getCodeBtn');
      
      getCodeBtn.addEventListener('click', function() {
        const phoneInput = document.getElementById('phoneInput');
        
        if (!phoneInput.value) {
          alert('请输入手机号码');
          return;
        }
        
        if (phoneInput.value.length !== 11) {
          alert('请输入正确的手机号码');
          return;
        }
        
        // 模拟发送验证码
        let countdown = 60;
        this.disabled = true;
        this.style.opacity = '0.7';
        
        const timer = setInterval(() => {
          this.textContent = `${countdown}秒后重试`;
          countdown--;
          
          if (countdown < 0) {
            clearInterval(timer);
            this.textContent = '获取验证码';
            this.disabled = false;
            this.style.opacity = '1';
          }
        }, 1000);
        
        // 提示用户
        alert('验证码已发送，请注意查收');
      });
      
      // 显示/隐藏密码
      const passwordToggles = document.querySelectorAll('.password-toggle');
      
      passwordToggles.forEach((toggle, index) => {
        toggle.addEventListener('click', function() {
          const input = index === 0 ? document.getElementById('passwordInput') : document.getElementById('confirmPasswordInput');
          const icon = this.querySelector('i');
          
          if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
          } else {
            input.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
          }
        });
      });
      
      // 步骤切换
      const step1 = document.getElementById('step1');
      const step2 = document.getElementById('step2');
      const step3 = document.getElementById('step3');
      
      const nextStep1Btn = document.getElementById('nextStep1Btn');
      const nextStep2Btn = document.getElementById('nextStep2Btn');
      
      nextStep1Btn.addEventListener('click', function() {
        const phoneInput = document.getElementById('phoneInput');
        const codeInput = document.getElementById('codeInput');
        
        // 简单验证
        if (!phoneInput.value) {
          alert('请输入手机号码');
          return;
        }
        
        if (phoneInput.value.length !== 11) {
          alert('请输入正确的手机号码');
          return;
        }
        
        if (!codeInput.value) {
          alert('请输入验证码');
          return;
        }
        
        if (codeInput.value.length !== 6) {
          alert('验证码格式不正确');
          return;
        }
        
        // 切换到下一步
        step1.classList.remove('active');
        step2.classList.add('active');
        
        // 更新进度条
        document.getElementById('step1-number').classList.remove('active');
        document.getElementById('step1-number').classList.add('completed');
        document.getElementById('step1-number').innerHTML = '<i class="fas fa-check"></i>';
        document.getElementById('line1').classList.add('active');
        document.getElementById('step2-number').classList.add('active');
        document.getElementById('step2-title').classList.add('active');
      });
      
      nextStep2Btn.addEventListener('click', function() {
        const passwordInput = document.getElementById('passwordInput');
        const confirmPasswordInput = document.getElementById('confirmPasswordInput');
        
        // 简单验证
        if (!passwordInput.value) {
          alert('请输入新密码');
          return;
        }
        
        if (passwordInput.value.length < 6) {
          alert('密码长度不能少于6位');
          return;
        }
        
        if (passwordInput.value !== confirmPasswordInput.value) {
          alert('两次输入的密码不一致');
          return;
        }
        
        // 切换到最后一步
        step2.classList.remove('active');
        step3.classList.add('active');
        
        // 更新进度条
        document.getElementById('step2-number').classList.remove('active');
        document.getElementById('step2-number').classList.add('completed');
        document.getElementById('step2-number').innerHTML = '<i class="fas fa-check"></i>';
        document.getElementById('line2').classList.add('active');
        document.getElementById('step3-number').classList.add('active');
        document.getElementById('step3-title').classList.add('active');
      });
      
      // 页面加载动画
      const sections = document.querySelectorAll('.reset-form, .footer');
      sections.forEach((section, index) => {
        section.style.opacity = '0';
        section.style.transform = 'translateY(20px)';
        section.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
        
        setTimeout(() => {
          section.style.opacity = '1';
          section.style.transform = 'translateY(0)';
        }, 100);
      });
    });
  </script>
</body>
</html> 